import React, { PureComponent } from 'react'
import { addCounter, subCounter } from '../store/action'

// 引入connect 
import { connect } from 'react-redux'

export class About extends PureComponent {


    changeCounter(num, flag) {
        if (flag) {
            this.props.addNumber(num)
        } else {
            this.props.subNumber(num)
        }

    }
    render() {
        const { counter } = this.props
        return (
            <div>
                <p>About counter : {counter}</p>
                <button onClick={() => this.changeCounter(5, true)}>+5</button>
                <button onClick={() => this.changeCounter(-3, false)}>-3</button>
            </div>
        )
    }
}

// export default About
// connect() 返回值是一个高阶函数 接收两个fn
// 创建 store 映射
const mapStoreToProps = (state) => {
    return {
        counter: state.counter
    }
}

// 映射action
const mapDispatchToProps = (dispatch) => { 
    return {
        addNumber: (num) => dispatch(addCounter(num)),
        subNumber: (num) => dispatch(subCounter(num))
    }
}

//  connect()通过属性的方式传递给对应的组件
//<About {...this.props,...obj}>
export default connect(mapStoreToProps, mapDispatchToProps)(About)